<template>
  <KiFormDialog
    :title="formTitle"
    :show.sync="form.show"
    :readonly="form.status === 'r'"
    fullscreen
    ref="kiFormDialogRef"
  >
    <el-form :model="form" inline disabled v-if="form.status !== 'c'">
      <el-form-item label="平台商户ID">
        {{ form.data.mchId }}
      </el-form-item>
      <el-form-item label="更新时间">
        {{ form.data.updateTime }}
      </el-form-item>
      <el-form-item label="申请单编号">
        {{ form.data.applymentId }}
      </el-form-item>
      <el-form-item label="微信支付商户号">
        {{ form.data.payMchId || '未生成' }}
      </el-form-item>
      <el-form-item label="申请单状态">
        <el-tag v-if="applymentStatus.label" :type="applymentStatus.type">
          {{ applymentStatus.label }}
        </el-tag>
      </el-form-item>
    </el-form>

    <el-steps :active="active" finish-status="progress" align-center>
      <el-step
        :title="v.title"
        v-for="(v, index) of [
          { title: '商户信息', active: 0 },
          { title: '结算信息', active: 1 },
          { title: '超级管理员信息', active: 2 },
          { title: '店铺信息', active: 3 },
          { title: '补充材料', active: 4 }
        ]"
        :key="index"
        @click.native="active = v.active"
      />
    </el-steps>

    <el-form
      v-show="active === 0"
      ref="formRef0"
      label-position="top"
      :model="form.data.applymentJson"
      :disabled="form.status === 'r' || form.submitting"
      v-loading="form.loading"
    >
      <div style="display: flex; margin-top: 20px">
        <h3>商户信息</h3>
      </div>
      <el-form-item label="平台商户名称" prop="mchId" verify>
        <!-- <el-input v-if="form.status === 'r'" v-model="form.data.merchantName" />
        <KiSelect
          v-else
          v-model="form.data.applymentJson.mchId"
          :search="queryNotBindMerchant"
          :searchImmediately="false"
          :props="{
            label: 'name',
            value: 'id'
          }"
          ref="queryNotBindMerchantRef"
        /> -->
        <merchantSelect
          v-model="form.data.applymentJson.mchId"
          placeholder="请输入平台商户名称"
        />
      </el-form-item>
      <el-form-item label="支付完成商户简称" prop="merchantShortname" verify>
        <el-input
          v-model="form.data.applymentJson.merchantShortname"
          maxlength="21"
          show-word-limit
          clearable
          placeholder="请填写商户别名"
        />
        <form-item-tip>
          商户简称将在支付完成页向卖家展示，请谨慎填写。
        </form-item-tip>
      </el-form-item>

      <template
        v-if="['2', '4'].includes(form.data.applymentJson.organizationType)"
      >
        <div style="display: flex; align-items: center; margin-top: 3rem">
          <h3 style="display: inline-block">营业执照</h3>
          <form-item-tip style="display: inline-flex; margin-left: 1rem">
            请上传营业执照，需年检盖章齐全，当年注册除外。
          </form-item-tip>
        </div>
        <el-form-item
          label="营业执照照片"
          prop="businessLicenseInfo.businessLicenseCopyDto"
          verify
        >
          <div style="display: flex; align-items: center">
            <Imgpond
              v-bind="imgpondConfig"
              v-model="
                form.data.applymentJson.businessLicenseInfo
                  .businessLicenseCopyDto
              "
              :count="1"
              @before-upload="licenseOcr"
            />
            <form-item-tip style="margin-left: 1rem">
              <div>请上传营业执照的证件图片：</div>
              <div>
                （1）请上传证件的彩色扫描件或彩色数码拍摄件，黑白复印件需加盖公章（公章信息需完整）
                。
              </div>
              <div>
                （2）不得添加无关水印（非微信支付商户申请用途的其他水印）。
              </div>
              <div>
                （3）需提供证件的正面拍摄件，完整、照面信息清晰可见。信息不清晰、扭曲、压缩变形、反光、不完整均不接受。
              </div>
              <div>（4）不接受二次剪裁、翻拍、PS的证件照片。</div>
            </form-item-tip>
          </div>
        </el-form-item>
        <el-form-item
          label="证件注册号"
          prop="businessLicenseInfo.businessLicenseNumber"
          :verify="
            (rule, val, callback) => {
              if (!/^\d{15}$|^[\dA-Z]{18}$/.test(val)) {
                callback('请输入 15位数字 或 18位数字|大写字母')
              } else {
                callback()
              }
            }
          "
        >
          <el-input
            v-model="
              form.data.applymentJson.businessLicenseInfo.businessLicenseNumber
            "
            clearable
            placeholder="请填写营业执照注册号"
          />
        </el-form-item>
        <el-form-item
          label="商户名称"
          prop="businessLicenseInfo.merchantName"
          verify
        >
          <el-input
            v-model="form.data.applymentJson.businessLicenseInfo.merchantName"
            maxlength="110"
            show-word-limit
            clearable
            placeholder="请填写营业执照的商家名称"
          />
          <form-item-tip>
            <div>
              1、请填写营业执照/登记证书的商家名称，2~110个字符，支持括号。
            </div>
            <div>2、个体工商户/党政、机关及事业单位，不能以“公司”结尾。</div>
            <div>
              3、个体工商户，若营业执照上商户名称为空或为“无”，请填写"个体户+经营者姓名"，如“个体户张三”
              。
            </div>
          </form-item-tip>
        </el-form-item>
        <el-form-item
          label="经营者/法人姓名"
          prop="businessLicenseInfo.legalPerson"
          verify
        >
          <el-input
            v-model="form.data.applymentJson.businessLicenseInfo.legalPerson"
            maxlength="15"
            show-word-limit
            clearable
            placeholder="请填写经营者/法定代表人姓名"
          />
        </el-form-item>
      </template>

      <template
        v-if="
          ['3', '2502', '1708'].includes(
            form.data.applymentJson.organizationType
          )
        "
      >
        <h3 style="margin-top: 20px">登记证书</h3>
        <el-form-item
          label="证书类型"
          prop="businessLicenseInfo.certType"
          verify
        >
          <KiSelect
            v-model="form.data.applymentJson.businessLicenseInfo.certType"
            :options="certTypeOptions"
            :props="{
              value: 'value',
              label: 'label'
            }"
          />
        </el-form-item>
        <el-form-item
          label="登记证书照片"
          prop="businessLicenseInfo.businessLicenseCopyDto"
          verify
        >
          <div style="display: flex; align-items: center">
            <Imgpond
              v-bind="imgpondConfig"
              v-model="form.data.applymentJson.businessLicenseInfo.businessLicenseCopyDto"
              :count="1"
              @before-upload="licenseOcr"
            />
            <form-item-tip style="margin-left: 1rem">
              <div>
                （1）请上传证件的彩色扫描件或彩色数码拍摄件，黑白复印件需加盖公章（公章信息需完整）
                。
              </div>
              <div>
                （2）不得添加无关水印（非微信支付商户申请用途的其他水印）。
              </div>
              <div>
                （3）需提供证件的正面拍摄件，完整、照面信息清晰可见。信息不清晰、扭曲、压缩变形、反光、不完整均不接受。
              </div>
              <div>（4）不接受二次剪裁、翻拍、PS的证件照片。</div>
            </form-item-tip>
          </div>
        </el-form-item>
        <el-form-item
          label="证书编号"
          prop="businessLicenseInfo.businessLicenseNumber"
          :verify="
            (rule, val, callback) => {
              if (!/^\d{15}$|^[\dA-Z]{18}$/.test(val)) {
                callback('请输入 15位数字 或 18位数字|大写字母')
              } else {
                callback()
              }
            }
          "
        >
          <el-input
            v-model="
              form.data.applymentJson.businessLicenseInfo.businessLicenseNumber
            "
            clearable
            placeholder="请填写登记证书证书编号"
          />
        </el-form-item>
        <el-form-item
          label="商户名称"
          prop="businessLicenseInfo.merchantName"
          verify
        >
          <el-input
            v-model="form.data.applymentJson.businessLicenseInfo.merchantName"
            maxlength="55"
            show-word-limit
            clearable
            placeholder="请填写登记证书的商家名称"
          />
          <form-item-tip>
            <div>（1）请填写登记证书的商家名称，2~110个字符，支持括号。</div>
            <div>（2）个体工商户/党政、机关及事业单位，不能以“公司”结尾。</div>
            <div>
              （3）个体工商户，若营业执照上商户名称为空或为“无”，请填写"个体户+经营者姓名"，如“个体户张三”
            </div>
          </form-item-tip>
        </el-form-item>
        <el-form-item
          label="经营者/法人姓名"
          prop="businessLicenseInfo.legalPerson"
          verify
        >
          <el-input
            v-model="form.data.applymentJson.businessLicenseInfo.legalPerson"
            maxlength="110"
            show-word-limit
            clearable
            placeholder="请填写法定代表人姓名"
          />
        </el-form-item>
        <el-form-item
          label="注册地址"
          prop="businessLicenseInfo.companyAddress"
          verify
        >
          <el-input
            v-model="form.data.applymentJson.businessLicenseInfo.companyAddress"
            maxlength="128"
            show-word-limit
            clearable
            placeholder="请填写登记证书的注册地址"
          />
        </el-form-item>
        <el-form-item
          label="证件生效日期"
          prop="businessLicenseInfo.__businessTime[0]"
          verify
        >
          <el-date-picker
            v-model="
              form.data.applymentJson.businessLicenseInfo.__businessTime[0]
            "
            type="date"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item
          label="证件失效日期"
          prop="businessLicenseInfo.__businessTime[1]"
          verify
        >
          <el-date-picker
            v-model="
              form.data.applymentJson.businessLicenseInfo.__businessTime[1]
            "
            type="date"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
      </template>

      <h3 style="margin-top: 20px">
        {{
          ['2401', '2500'].includes(form.data.applymentJson.organizationType)
            ? '经营者/法人信息'
            : '经营者证件'
        }}
      </h3>
      <el-form-item label="证件类型" prop="idDocType" verify>
        <KiSelect
          v-model="form.data.applymentJson.idDocType"
          :disabled="['2401', '2500'].includes(form.data.applymentJson.organizationType)"
          @change="idCocTypeChange"
          :options="[
            {
              value: 'IDENTIFICATION_TYPE_MAINLAND_IDCARD',
              label: '中国大陆居民-身份证'
            },
            ...(!['2401', '2500', '2502'].includes(form.data.applymentJson.organizationType)
              ? [
                  {
                    value: 'IDENTIFICATION_TYPE_OVERSEA_PASSPORT',
                    label: '其他国家或地区居民-护照'
                  },
                  {
                    value: 'IDENTIFICATION_TYPE_HONGKONG',
                    label: '中国香港居民–来往内地通行证'
                  },
                  {
                    value: 'IDENTIFICATION_TYPE_MACAO',
                    label: '中国澳门居民–来往内地通行证'
                  },
                  {
                    value: 'IDENTIFICATION_TYPE_TAIWAN',
                    label: '中国台湾居民–来往大陆通行证'
                  },
                  {
                    value: 'IDENTIFICATION_TYPE_FOREIGN_RESIDENT',
                    label: '外国人居留证'
                  },
                  {
                    value: 'IDENTIFICATION_TYPE_HONGKONG_MACAO_RESIDENT',
                    label: '港澳居民证'
                  },
                  {
                    value: 'IDENTIFICATION_TYPE_HONGKONG_MACAO_RESIDENT',
                    label: '台湾居民证'
                  }
                ]
              : [])
          ]"
          :props="{
            value: 'value',
            label: 'label'
          }"
        />
      </el-form-item>
      <template
        v-if="
          form.data.applymentJson.idDocType ===
          'IDENTIFICATION_TYPE_MAINLAND_IDCARD'
        "
      >
        <el-form-item
          label="身份证人像面照片"
          prop="idCardInfo.idCardCopyDto"
          verify
        >
          <Imgpond
            v-bind="imgpondConfig"
            v-model="form.data.applymentJson.idCardInfo.idCardCopyDto"
            :count="1"
            @before-upload="idCardOcr"
          />
        </el-form-item>
        <el-form-item
          label="身份证国徽面照片"
          prop="idCardInfo.idCardNationalDto"
          verify
        >
          <Imgpond
            v-bind="imgpondConfig"
            v-model="form.data.applymentJson.idCardInfo.idCardNationalDto"
            :count="1"
          />
        </el-form-item>
        <el-form-item label="身份证姓名" prop="idCardInfo.idCardName" verify>
          <el-input
            v-model="form.data.applymentJson.idCardInfo.idCardName"
            maxlength="15"
            show-word-limit
            clearable
            placeholder="请填写法人名称"
          />
        </el-form-item>
        <el-form-item
          label="身份证号码"
          prop="idCardInfo.idCardNumber"
          :verify="{ type: 'idCard' }"
        >
          <el-input
            v-model="form.data.applymentJson.idCardInfo.idCardNumber"
            clearable
            placeholder="请填写法人证件号码"
          />
        </el-form-item>
        <el-form-item
          v-if="form.data.applymentJson.organizationType == 2"
          label="身份证居住地址"
          prop="idCardInfo.idCardAddress"
          verify
        >
          <el-input
            v-model="form.data.applymentJson.idCardInfo.idCardAddress"
            maxlength="512"
            show-word-limit
            clearable
            placeholder="请填写法人证件的身份证居住地址"
          />
        </el-form-item>
        <el-form-item
          label="证件有效期类型"
          prop="idCardInfo.__idCardValidTimeType"
          verify
        >
          <el-radio-group
            v-model="form.data.applymentJson.idCardInfo.__idCardValidTimeType"
            @change="onIdCardValidTimeTypeChange"
          >
            <el-radio
              :key="i"
              :label="v.value"
              v-for="(v, i) of [
                { value: 1, label: '定期' },
                { value: 2, label: '长期' }
              ]"
            >
              {{ v.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="证件开始日期"
          prop="idCardInfo.idCardValidTimeBegin"
          verify
        >
          <el-date-picker
            v-model="form.data.applymentJson.idCardInfo.idCardValidTimeBegin"
            type="date"
            value-format="yyyy-MM-dd"
          />
          <form-item-tip>请填写身份证有效期的开始日期。</form-item-tip>
        </el-form-item>
        <el-form-item
          v-if="form.data.applymentJson.idCardInfo.__idCardValidTimeType === 1"
          label="证件失效日期"
          prop="idCardInfo.idCardValidTime"
          verify
        >
          <el-date-picker
            v-model="form.data.applymentJson.idCardInfo.idCardValidTime"
            type="date"
            value-format="yyyy-MM-dd"
          />
          <form-item-tip>请填写身份证有效期的结束日期。</form-item-tip>
        </el-form-item>
      </template>
      <template v-else-if="form.data.applymentJson.idDocType">
        <el-form-item
          label="证件正面照片"
          prop="idDocInfo.idDocCopyDto"
          verify
        >
          <Imgpond
            v-bind="imgpondConfig"
            v-model="form.data.applymentJson.idDocInfo.idDocCopyDto"
            :count="1"
          />
        </el-form-item>
        <el-form-item
          v-if="form.data.applymentJson.idDocType != 'IDENTIFICATION_TYPE_OVERSEA_PASSPORT'"
          label="证件反面照片"
          prop="idDocInfo.idDocCopyBackDto"
          verify
        >
          <Imgpond
            v-bind="imgpondConfig"
            v-model="form.data.applymentJson.idDocInfo.idDocCopyBackDto"
            :count="1"
          />
        </el-form-item>
        <el-form-item label="证件姓名" prop="idDocInfo.idDocName" verify>
          <el-input
            v-model="form.data.applymentJson.idDocInfo.idDocName"
            maxlength="256"
            show-word-limit
            clearable
            placeholder="请填写证件姓名"
          />
        </el-form-item>
        <el-form-item
          label="证件号码"
          prop="idDocInfo.idDocNumber"
          :verify="
            (rule, val, callback) => {
              if (!/^[\d\a-zA-z-]{7,11}$/.test(val)) {
                callback('请输入7~11位 数字|字母|连字符')
              } else {
                callback()
              }
            }
          "
        >
          <el-input
            v-model="form.data.applymentJson.idDocInfo.idDocNumber"
            clearable
            placeholder="请填写证件号码"
          />
        </el-form-item>
        <el-form-item
          v-if="form.data.applymentJson.organizationType == 2"
          label="证件居住地址"
          verify
          prop="idDocInfo.idDocAddress"
        >
          <el-input
            v-model="form.data.applymentJson.idDocInfo.idDocAddress"
            maxlength="512"
            show-word-limit
            clearable
            placeholder="请填写证件居住地址"
          />
        </el-form-item>
        <el-form-item
          label="证件有效期类型"
          prop="idDocInfo.__docPeriodEndType"
          verify
        >
          <el-radio-group
            v-model="form.data.applymentJson.idDocInfo.__docPeriodEndType"
            @change="onDocPeriodEndTypeChange"
          >
            <el-radio
              :key="i"
              :label="v.value"
              v-for="(v, i) of [
                { value: 1, label: '定期' },
                { value: 2, label: '长期' }
              ]"
            >
              {{ v.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="证件开始日期"
          prop="idDocInfo.docPeriodBegin"
          verify
        >
          <el-date-picker
            v-model="form.data.applymentJson.idDocInfo.docPeriodBegin"
            type="date"
            value-format="yyyy-MM-dd"
          />
          <form-item-tip>请填写身份证有效期的开始日期。</form-item-tip>
        </el-form-item>
        <el-form-item
          v-if="form.data.applymentJson.idDocInfo.__docPeriodEndType === 1"
          label="证件失效日期"
          prop="idDocInfo.docPeriodEnd"
          verify
        >
          <el-date-picker
            v-model="form.data.applymentJson.idDocInfo.docPeriodEnd"
            type="date"
            value-format="yyyy-MM-dd"
          />
          <form-item-tip>请填写证件有效期的结束日期。</form-item-tip>
        </el-form-item>
      </template>

      <template v-if="form.data.applymentJson.organizationType == '2'">
        <h3 style="margin-top: 20px">
          最终受益人信息
        </h3>
        
        <el-form-item
          label="经营者/法人是否为受益人"
          prop="owner"
          verify
        >
          <el-radio-group
            v-model="form.data.applymentJson.owner"
          >
            <el-radio
              :key="i"
              :label="v.value"
              v-for="(v, i) of [
                { value: true, label: '是' },
                { value: false, label: '否' }
              ]"
            >
              {{ v.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <form-item-tip style="display: inline-flex; margin-left: 1rem">
          （1）若经营者/法人不是最终受益所有人，则需提填写受益所有人信息，最多上传4个。若经营者/法人是最终受益所有人之一，可在此填写其他受益所有人信息，最多上传3个。<br/>
          （2）根据国家相关法律法规，需要提供公司受益所有人信息，受益所有人需符合至少以下条件之一：<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;1、直接或者间接拥有超过25%公司股权或者表决权的自然人。<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;2、通过人事、财务等其他方式对公司进行控制的自然人。<br/>
          &nbsp;&nbsp;&nbsp;&nbsp;3、公司的高级管理人员，包括公司的经理、副经理、财务负责人、上市公司董事会秘书和公司章程规定的其他人员。
        </form-item-tip>
        <!-- 收益人列表 -->
        <div v-for="(o, i) in form.data.applymentJson.uboInfoList" :key="o.__key">
          <el-card style="margin-bottom: 10px">
            <div slot="header" class="clearfix">
              <span style="font-weight: 600; font-size: 16px">最终受益人{{i + 1}}</span>
              <el-button
                style="float: right;"
                type="danger"
                icon="el-icon-delete"
                circle
                @click="form.data.applymentJson.uboInfoList.splice(index, 1)"
                size="mini"
              ></el-button>
            </div>
            <UboInfo :form="form.data.applymentJson.uboInfoList[i]" :index="i"></UboInfo>
          </el-card>
        </div>
        <el-button
          @click="form.data.applymentJson.uboInfoList.push({ __key: uuidv4() })"
          style="width:100%; margin-top: 30px;"
          round
          plain
          type="primary"
          v-if="form.status != 'r'"
          :disabled="
              form.data.applymentJson.uboInfoList.length >= (form.data.applymentJson.owner ? 3 : 4)
          "
        >
          + 添加受益人
        </el-button>
      </template>

      <el-form-item
        label="结算规则"
        prop="settlementInfo.settlementId"
        v-if="form.data.applymentJson.organizationType != '2500'"
        :rules="[{
          required: form.data.applymentJson.organizationType == '2502',
          message: '请选择结算规则',
          trigger: ['blur', 'change']
        }]"
      >
        <KiSelect
          v-model="form.data.applymentJson.settlementInfo.settlementId"
          @change="settlementIdChange"
          :options="DICT.settlementType[form.data.applymentJson.organizationType]"
          :props="{
            value: 'value',
            label: 'label'
          }"
        />
      </el-form-item>
      <form-item-tip v-if="form.data.applymentJson.organizationType != '2500'">
        请参照<a
          href="https://kf.qq.com/faq/220228qEfuAz220228bMFji6.html"
          style="color: #0000ee"
          target="_blank"
        >入驻结算规则、行业属性及特殊资质（电商二级商户）</a>填写
      </form-item-tip>
      <el-form-item
        v-if="form.data.applymentJson.settlementInfo.settlementId && form.data.applymentJson.settlementInfo.settlementId != '747'"
        label="所属行业"
        prop="settlementInfo.qualificationType"
        verify
      >
        <KiSelect
          v-model="form.data.applymentJson.settlementInfo.qualificationType"
          :options="DICT.qualificationType[form.data.applymentJson.settlementInfo.settlementId]"
        />
      </el-form-item>
    </el-form>

    <el-form
      v-show="active === 1"
      ref="formRef1"
      label-position="top"
      :model="form.data.applymentJson.accountInfo"
      :disabled="form.status === 'r' || form.submitting"
      v-loading="form.loading"
    >
      <div style="display: flex; margin-top: 20px">
        <h3>结算银行账户</h3>
      </div>
      <el-form-item label="账户类型" prop="bankAccountType" verify>
        <el-radio-group
          v-model="form.data.applymentJson.accountInfo.bankAccountType"
          :disabled="bankAccountType.length === 1"
        >
          <el-radio :key="i" :label="v.value" v-for="(v, i) of bankAccountType">
            {{ v.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="开户名称" prop="accountName" verify>
        <el-input
          v-model="form.data.applymentJson.accountInfo.accountName"
          maxlength="30"
          show-word-limit
          clearable
          :placeholder="accountNamePlaceholder"
        />
      </el-form-item>
      <el-form-item label="开户银行" prop="accountBank" verify>
        <KiSelect
          v-model="form.data.applymentJson.accountInfo.accountBank"
          :options="DICT.account_bank"
        />
      </el-form-item>
      <el-form-item label="开户支行" verify>
        <div style="display: flex">
          <el-form-item prop="bankAreaCode" verify style="flex: 1">
            <AllRegionSelect
              v-model="form.data.applymentJson.accountInfo.bankAreaCode"
              :disabled="form.status === 'r'"
            />
          </el-form-item>
          <el-form-item
            v-if="
              form.data.applymentJson.accountInfo.accountBank === '其他银行'
            "
            prop="bankBranchId"
            verify
            style="flex: 1; margin-left: 1rem"
          >
            <KiSelect
              v-model="form.data.applymentJson.accountInfo.bankBranchId"
              :search="queryAccountInstNameList"
              :searchImmediately="false"
              :props="{
                value: 'bankBranchId',
                label: 'bankName'
              }"
              clearable
              ref="queryAccountInstNameListRef"
            />
          </el-form-item>
        </div>
      </el-form-item>
      <el-form-item label="银行账号" prop="accountNumber" verify>
        <el-input
          v-model="form.data.applymentJson.accountInfo.accountNumber"
          maxlength="30"
          show-word-limit
          clearable
          placeholder="请填写结算银行账号"
        />
      </el-form-item>
    </el-form>

    <el-form
      v-show="active === 2"
      ref="formRef2"
      label-position="top"
      :model="form.data.applymentJson.contactInfo"
      :disabled="form.status === 'r' || form.submitting"
      v-loading="form.loading"
    >
      <div style="display: flex; align-items: center; margin-top: 20px">
        <h3 style="display: inline-block">超级管理员信息</h3>
        <form-item-tip style="display: inline-flex; margin-left: 1rem">
          超级管理员将接收开户信息及完成签约，并可进行商户号的日常重要管理及资金操作。请确定超级管理员为商户法定代表人或负责人后再进行操作。
        </form-item-tip>
      </div>
      <el-form-item label="超管身份" prop="contactType" verify>
        <el-radio-group
          v-model="form.data.applymentJson.contactInfo.contactType"
          :disabled="
            ['2401', '2500'].includes(form.data.applymentJson.organizationType)
          "
        >
          <el-radio
            :key="i"
            :label="v.value"
            v-for="(v, i) of [
              { value: '65', label: '经营者/法人' },
              ...(!['2401', '2500'].includes(
                form.data.applymentJson.organizationType
              )
                ? [{ value: '66', label: '负责人' }]
                : [])
            ]"
          >
            {{ v.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="超管姓名" prop="contactName" verify>
        <el-input
          v-model="form.data.applymentJson.contactInfo.contactName"
          :disabled="form.data.applymentJson.contactInfo.contactType === '65'"
          maxlength="15"
          show-word-limit
          clearable
          :placeholder="contactNamePlaceholder"
        />
      </el-form-item>
      <template v-if="form.data.applymentJson.contactInfo.contactType !== '65'">
        <el-form-item label="超管证件类型" prop="contactIdDocType" verify>
          <KiSelect
            v-model="form.data.applymentJson.contactInfo.contactIdDocType"
            :options="DICT.cardTypes"
            :props="{
              value: 'value',
              label: 'label'
            }"
          />
        </el-form-item>
        <el-form-item
          label="超管证件号码"
          prop="contactIdCardNumber"
          verify
        >
          <el-input
            v-model="form.data.applymentJson.contactInfo.contactIdCardNumber"
            clearable
            :placeholder="contactIdCardNumberPlaceholder"
          />
        </el-form-item>
        <el-form-item
          label="超管证件正面照片"
          prop="contactIdDocCopyDto"
          verify
        >
          <Imgpond
            v-bind="imgpondConfig"
            v-model="form.data.applymentJson.contactInfo.contactIdDocCopyDto"
            :count="1"
          />
        </el-form-item>
        <el-form-item
          label="超管证件反面照片"
          prop="contactIdDocCopyBackDto"
          v-if="form.data.applymentJson.contactInfo.contactIdDocType != 'IDENTIFICATION_TYPE_OVERSEA_PASSPORT'"
          verify
        >
          <Imgpond
            v-bind="imgpondConfig"
            v-model="form.data.applymentJson.contactInfo.contactIdDocCopyBackDto"
            :count="1"
          />
        </el-form-item>
        <el-form-item
          label="证件有效期类型"
          prop="__contactPeriodEndType"
        >
          <el-radio-group
            v-model="form.data.applymentJson.contactInfo.__contactPeriodEndType"
            @change="onContactPeriodEndTypeChange"
          >
            <el-radio
              :key="i"
              :label="v.value"
              v-for="(v, i) of [
                { value: 1, label: '定期' },
                { value: 2, label: '长期' }
              ]"
            >
              {{ v.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="证件开始日期"
          prop="contactIdDocPeriodBegin"
          verify
        >
          <el-date-picker
            v-model="form.data.applymentJson.contactInfo.contactIdDocPeriodBegin"
            type="date"
            value-format="yyyy-MM-dd"
          />
          <form-item-tip>请填写身份证有效期的开始日期。</form-item-tip>
        </el-form-item>
        <el-form-item
          v-if="form.data.applymentJson.contactInfo.__contactPeriodEndType === 1"
          label="证件失效日期"
          prop="contactIdDocPeriodEnd"
          verify
        >
          <el-date-picker
            v-model="form.data.applymentJson.contactInfo.contactIdDocPeriodEnd"
            type="date"
            value-format="yyyy-MM-dd"
          />
          <form-item-tip>请填写证件有效期的结束日期。</form-item-tip>
        </el-form-item>
        <el-form-item
          label="业务办理授权函"
          prop="businessAuthorizationLetterDto"
          verify
        >
          <Imgpond
            v-bind="imgpondConfig"
            v-model="form.data.applymentJson.contactInfo.businessAuthorizationLetterDto"
            :count="1"
          />
        </el-form-item>
        <form-item-tip>
          请参照<a
            href="https://kf.qq.com/faq/220509Y3Yvym220509fQvYR7.html"
            style="color: #0000ee"
            target="_blank"
          >示例图</a>
          打印业务办理授权函，全部信息需打印，不支持手写商户信息，并加盖公章。</form-item-tip>
      </template>

      <el-form-item
        label="超管手机号"
        prop="mobilePhone"
        :verify="{ type: 'phone' }"
      >
        <el-input
          v-model="form.data.applymentJson.contactInfo.mobilePhone"
          clearable
          placeholder="请填写超级管理员手机号"
        />
        <form-item-tip>
          用于接收微信支付的重要管理信息及日常操作验证码。
        </form-item-tip>
      </el-form-item>
      <el-form-item
        label="超管邮箱"
        prop="contactEmail"
        :verify="{
          type: 'email'
        }"
      >
        <el-input
          v-model="form.data.applymentJson.contactInfo.contactEmail"
          clearable
          placeholder="请填写超级管理员联系邮箱"
          maxlength="256"
          show-word-limit
        />
        <form-item-tip>
          用于接收微信支付的开户邮件及日常业务通知。
        </form-item-tip>
      </el-form-item>
    </el-form>

    <el-form
      v-show="active === 3"
      ref="formRef3"
      label-position="top"
      :model="form.data.applymentJson.salesSceneInfo"
      :disabled="form.status === 'r' || form.submitting"
      v-loading="form.loading"
    >
      <div style="display: flex; margin-top: 20px">
        <h3>店铺信息</h3>
      </div>
      <el-form-item label="店铺名称" prop="storeName" verify>
        <el-input
          v-model="form.data.applymentJson.salesSceneInfo.storeName"
          maxlength="80"
          show-word-limit
          clearable
          placeholder="请填写店铺全称"
        />
      </el-form-item>
      <el-form-item label="微信店铺链接生成二维码" prop="storeLink" verify>
        <el-radio-group
          v-model="form.data.applymentJson.salesSceneInfo.storeLink"
        >
          <el-radio
            :key="i"
            :label="v.value"
            v-for="(v, i) of [
              { value: 1, label: '微信店铺主页链接' },
              { value: 2, label: '微信店铺二维码' }
            ]"
          >
            {{ v.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        prop="storeUrl"
        verify
        v-if="form.data.applymentJson.salesSceneInfo.storeLink === 1"
      >
        <el-input
          v-model="form.data.applymentJson.salesSceneInfo.storeUrl"
          maxlength="256"
          show-word-limit
          clearable
          placeholder="请填写店铺主页链接"
        />
      </el-form-item>
      <el-form-item
        prop="storeQrCodeDto"
        verify
        v-else-if="form.data.applymentJson.salesSceneInfo.storeLink === 2"
      >
        <Imgpond
          v-bind="imgpondConfig"
          v-model="form.data.applymentJson.salesSceneInfo.storeQrCodeDto"
          :count="1"
        />
      </el-form-item>
      <el-form-item label="小程序APPID" prop="miniProgramSubAppId">
        <el-input
          v-model="form.data.applymentJson.salesSceneInfo.miniProgramSubAppId"
          maxlength="256"
          show-word-limit
          clearable
          placeholder="请填写认证主体与进件商户一致的小程序APPID"
        />
        <form-item-tip>请填写认证主体与商户一致的小程序APPID。<br>小微主体不支持绑定小程序APPID</form-item-tip>
      </el-form-item>
    </el-form>

    <el-form
      v-show="active === 4"
      ref="formRef4"
      label-position="top"
      :model="form.data.applymentJson"
      :disabled="form.status === 'r' || form.submitting"
      v-loading="form.loading"
    >
      <div style="display: flex; align-items: center; margin-top: 20px">
        <h3 style="display: inline-block">补充材料</h3>
        <form-item-tip style="display: inline-flex; margin-left: 1rem">
          选填项，根据实际审核情况，额外要求商家提供指定的补充资料。
        </form-item-tip>
      </div>
      <el-form-item label="特殊资质" prop="qualificationsDto">
        <div style="display: flex; align-items: center">
          <Imgpond
            v-bind="imgpondConfig"
            v-model="form.data.applymentJson.qualificationsDto"
            :count="5"
          />
          <form-item-tip style="margin-left: 1rem">
            <div>
              （1）根据商户经营业务要求提供相关资质，详情查看
              <a
                href="https://kf.qq.com/faq/190610B7baQb190610NN3mQN.html"
                style="color: #0000ee"
              >
                《行业对应特殊资质》
              </a>
            </div>
            <div>（2）最多可上传5张照片</div>
          </form-item-tip>
        </div>
      </el-form-item>
      <el-form-item label="补充材料" prop="businessAdditionPicsDto">
        <div style="display: flex; align-items: center">
          <Imgpond
            v-bind="imgpondConfig"
            v-model="form.data.applymentJson.businessAdditionPicsDto"
            :count="5"
          />
          <form-item-tip style="margin-left: 1rem">
            根据实际审核情况，额外要求提供，最多可上传5张照片。
          </form-item-tip>
        </div>
      </el-form-item>
      <el-form-item
        label="补充说明"
        prop="businessAdditionDesc"
        :verify="{
          required: ['2500'].includes(form.data.applymentJson.organizationType)
        }"
      >
        <el-input
          v-model="form.data.applymentJson.businessAdditionDesc"
          type="textarea"
          :autosize="{ minRows: 3 }"
          maxlength="500"
          show-word-limit
          clearable
          :disabled="
            ['2500'].includes(form.data.applymentJson.organizationType)
          "
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="form.show = false">取 消</el-button>
      <el-button v-show="active > 0" @click="active--">上一步</el-button>
      <el-button v-show="active < 4" @click="nextStep" type="primary">
        下一步
      </el-button>
      <template v-if="form.status !== 'r' && !form.loading">
        <el-button type="info" @click="updateDraftInfo">保存草稿</el-button>
        <el-button
          type="primary"
          @click="submit"
          :loading="form.submitting"
          v-if="active === 4"
        >
          提 交
        </el-button>
      </template>
    </template>
  </KiFormDialog>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import DICT from './dict'
import RegionSelect from 'region-select'
import { jsonToFormData, pickDeepBy, notEmpty } from '@/utils'
import merchantSelect from '@/components/merchantSelect'
import UboInfo from './components/UboInfo.vue'
import 'imgpond/dist/style.css'
import Imgpond from 'imgpond'
import { v4 as uuidv4 } from 'uuid'

export default {
  mixins: [pageMixin],
  components: { RegionSelect, Imgpond, merchantSelect, UboInfo },
  props: {
    form: Object,
    formTitle: String,
    submitForm: Function
  },
  setup: () => {},
  data() {
    return {
      DICT,
      active: 0,
      imgpondConfig: {
        upload: (file, context) =>
          new Promise((resolve, reject) => {
            // this.$POST(import.meta.env.VUE_APP_BASE_API + '/merchant/applyment/uploadImg', jsonToFormData({
            this.$POST(
              '/sot-admin-api/merchant/applyment/uploadImg',
              jsonToFormData({
                file,
                domainId: import.meta.env.VITE_APP_domainId,
                dir: 'img/wechat',
                ...context.$attrs.requestParam
              }),
              {
                // baseURL: '', // 针对prod环境中baseAPI为相对路径的情况
                timeout: 20000
              }
            )
              .then(({ data }) => {
                resolve(data)
              })
              .catch((e) => {
                reject(e)
              })
          }),
        srcAt: 'url',
        size: 2
      },
      bankAccountType: []
    }
  },
  watch: {
    'form.show'(n) {
      this.$nextTick(() => {
        this.$emit('update:formRef', this.$refs.formRef)
      })
    },
    'form.data.applymentJson.idCardInfo.idCardValidTime'(n) {
      if (n) {
        this.$set(
          this.form.data.applymentJson.idCardInfo,
          '__idCardValidTimeType',
          n === '长期' ? 2 : 1
        )
      }
    },
    'form.data.applymentJson.contactInfo.contactIdDocPeriodEnd'(n) {
      if (n) {
        this.$set(
          this.form.data.applymentJson.contactInfo,
          '__contactPeriodEndType',
          n === '长期' ? 2 : 1
        )
      }
    },
    'form.data.applymentJson.idDocInfo.docPeriodEnd'(n) {
      if (n) {
        this.$set(
          this.form.data.applymentJson.idDocInfo,
          '__docPeriodEndType',
          n === '长期' ? 2 : 1
        )
      }
    },
    'form.data.applymentJson.idCardInfo.idCardName'(n) {
      this.setDefaultAccountName()
      this.setDefaultContactName()
    },
    'form.data.applymentJson.idCardInfo.idCardNumber'(n) {
      this.setDefaultContactIdCardNumber()
    },
    'form.data.applymentJson.idDocInfo.idDocName'(n) {
      this.setDefaultAccountName()
      this.setDefaultContactName()
    },
    'form.data.applymentJson.idDocInfo.idDocNumber'(n) {
      this.setDefaultContactIdCardNumber()
    },
    'form.data.applymentJson.businessLicenseInfo.merchantName'() {
      this.setDefaultAccountName()
    },
    'form.data.applymentJson.accountInfo.bankAccountType'(n) {
      this.setDefaultAccountName()
    },
    'form.data.applymentJson.contactInfo.contactType'(n) {
      if (n == '65') {
        this.$set(this.form.data.applymentJson, 'contactInfo', {
          contactType: this.form.data.applymentJson.contactInfo.contactType,
        })
      }
      this.setDefaultContactName()
      this.setDefaultContactIdCardNumber()
    },
    'form.data.applymentJson.businessLicenseInfo.businessTime'(n) {
      this.$set(
        this.form.data.applymentJson.businessLicenseInfo,
        '__businessTime',
        n ? JSON.parse(n) : []
      )
    },
    active(n) {
      if (this.form.status === 'r') {
        this.clearValidate(n)
      }
    }
  },
  computed: {
    certTypeOptions() {
      return [
        ...(this.form.data.applymentJson.organizationType === '3'
          ? [
              {
                value: 'CERTIFICATE_TYPE_2388',
                label: '事业单位法人证书'
              }
            ]
          : this.form.data.applymentJson.organizationType === '2502'
          ? [
              {
                value: 'CERTIFICATE_TYPE_2389',
                label: '统一社会信用代码证书'
              }
            ]
          : [
              {
                value: 'CERTIFICATE_TYPE_2389',
                label: '统一社会信用代码证书'
              },
              {
                value: 'CERTIFICATE_TYPE_2394',
                label: '社会团体法人登记证书'
              },
              {
                value: 'CERTIFICATE_TYPE_2395',
                label: '民办非企业单位登记证书'
              },
              {
                value: 'CERTIFICATE_TYPE_2396',
                label: '基金会法人登记证书'
              },
              {
                value: 'CERTIFICATE_TYPE_2399',
                label: '宗教活动场所登记证'
              },
              {
                value: 'CERTIFICATE_TYPE_2400',
                label: '政府部门下发的其他有效证明文件'
              },
              {
                value: 'CERTIFICATE_TYPE_2520',
                label: '基层群众性自治组织特别法人统一社会信用代码证'
              },
              {
                value: 'CERTIFICATE_TYPE_2521',
                label: '社会团体法人登记证书'
              },
              {
                value: 'CERTIFICATE_TYPE_2522',
                label: '农村集体经济组织登记证'
              }
            ])
      ]
    },
    applymentStatus() {
      let label = this.DICT.status[this.form.data.status]?.label
      let rejectReason = ''
      this.form.data.auditDetail?.map((v) => {
        rejectReason += (rejectReason ? ';' : '') + v.rejectReason
      })
      return {
        label: (label || '') + (rejectReason ? `【${rejectReason}】` : ''),
        type: this.DICT.status[this.form.data.status]?.type
      }
    },
    contactNamePlaceholder() {
      switch (this.form.data.applymentJson.contactInfo.contactType) {
        case '65':
          return '该姓名需与法人身份证姓名一致，请填写法人身份证姓名'
        case '66':
          return '请填写超级管理员姓名'
        default:
          return '请先选择超级管理员类型'
      }
    },
    contactIdCardNumberPlaceholder() {
      switch (this.form.data.applymentJson.contactInfo.contactType) {
        case '65':
          return '该身份证号码需与法人身份证号码一致，请填写法人身份证号码'
        case '66':
          return '请填写超级管理员身份证号码'
        default:
          return '请先选择超级管理员类型'
      }
    },
    accountNamePlaceholder() {
      switch (this.form.data.applymentJson.accountInfo.bankAccountType) {
        case '74':
          return '开户名称必须与营业执照上的“商户名称”一致，请填写商户名称'
        case '75':
          return '开户名称必须与身份证姓名一致，请填写身份证姓名'
        default:
          return '请先选择账户类型'
      }
    }
  },
  methods: {
    uuidv4,
    openFormCallback() {
      this.$nextTick(() => {
        this.$refs.queryNotBindMerchantRef?.remoteMethod()
        this.$refs.queryAccountInstNameListRef?.remoteMethod()
      })

      // 写在 template 或 computed 中不触发更新
      this.bankAccountType = [
        ...(['4', '2401', '2500'].includes(
          this.form.data.applymentJson.organizationType
        )
          ? [{ value: '75', label: '对私账户' }]
          : []),
        ...(['2', '3', '4', '1708', '2502'].includes(
          this.form.data.applymentJson.organizationType
        )
          ? [{ value: '74', label: '对公账户' }]
          : [])
      ]

      // 设置账户类型默认值
      if (
        this.bankAccountType.length === 1 &&
        !this.form.data.applymentJson.accountInfo.bankAccountType
      ) {
        this.$set(
          this.form.data.applymentJson.accountInfo,
          'bankAccountType',
          this.bankAccountType[0].value
        )
      }

      // 设置补充说明默认值
      if (
        ['2500'].includes(this.form.data.applymentJson.organizationType) &&
        !this.form.data.applymentJson.businessAdditionDesc
      ) {
        this.$set(
          this.form.data.applymentJson,
          'businessAdditionDesc',
          '该商户已持续从事电子商务经营活动满6个月，且期间经营收入累计超过20万元。'
        )
      }
    },
    idCocTypeChange(n) {
      if(n == 'IDENTIFICATION_TYPE_MAINLAND_IDCARD') {
        this.$set(this.form.data.applymentJson, 'idCardInfo', {})
      } else{
        this.$set(this.form.data.applymentJson, 'idDocInfo', {})
      }
      
      this.setDefaultAccountName()
      // 政府机关、事业单位需设置身份证号
      this.setDefaultContactIdCardNumber()
    },
    settlementIdChange(n) {
      if(n) {
        this.$set(this.form.data.applymentJson.settlementInfo, 'qualificationType', '')
      }
    },
    closeFormCallback() {
      this.bankAccountType = []
      this.active = 0
    },
    queryAccountInstNameList(name) {
      return new Promise((resolve, reject) => {
        this.$POST(
          '/sot-admin-api/merchant/applyment/queryAccountInstNameList',
          {
            idStr: this.form.data.applymentJson.accountInfo.bankBranchId,
            name
          }
        ).then(({data}) => {
          resolve(data)
        })
      })
    },
    queryNotBindMerchant(name) {
      return new Promise((resolve, reject) => {
        this.$POST('/sot-admin-api/merchant/applyment/queryNotBindMerchant', {
          id: this.form.data.applymentJson.mchId,
          name
        }).then((data) => {
          resolve(data)
        })
      })
    },
    // 若管理员类型为“法人”，则该姓名需与法人身份证姓名一致
    // 若管理员类型为“负责人”，则可填写实际负责人的姓名
    setDefaultContactName() {
      if (this.form.data.applymentJson.contactInfo.contactType === '65') {
        this.$set(
          this.form.data.applymentJson.contactInfo,
          'contactName',
            this.form.data.applymentJson.idDocType === 'IDENTIFICATION_TYPE_MAINLAND_IDCARD'
              ? this.form.data.applymentJson.idCardInfo.idCardName
              : this.form.data.applymentJson.idDocInfo.idDocName
        )
      }
    },
    // 若管理员类型为法人，则该身份证号码需与法人身份证号码、证件类型一致
    // 若管理员类型为负责人，则可填写实际负责人的身份证号码、证件类型
    setDefaultContactIdCardNumber() {
      if (this.form.data.applymentJson.contactInfo.contactType === '65') {
        this.$set(
          this.form.data.applymentJson.contactInfo,
          'contactIdCardNumber',
            this.form.data.applymentJson.idDocType === 'IDENTIFICATION_TYPE_MAINLAND_IDCARD'
              ? this.form.data.applymentJson.idCardInfo.idCardNumber
              : this.form.data.applymentJson.idDocInfo.idDocNumber
        )
      }
    },
    // 选择对公账户时，开户名称必须与营业执照上的“商户名称”一致
    // 选择经营者个人银行卡时，开户名称必须与身份证姓名一致
    setDefaultAccountName() {
      switch (this.form.data.applymentJson.accountInfo.bankAccountType) {
        case '74':
          this.$set(
            this.form.data.applymentJson.accountInfo,
            'accountName',
            this.form.data.applymentJson.businessLicenseInfo.merchantName
          )
          break
        case '75':
          this.$set(
            this.form.data.applymentJson.accountInfo,
            'accountName',
            this.form.data.applymentJson.idDocType === 'IDENTIFICATION_TYPE_MAINLAND_IDCARD'
              ? this.form.data.applymentJson.idCardInfo.idCardName
              : this.form.data.applymentJson.idDocInfo.idDocName
          )
      }
    },
    validate() {
      return Promise.all(
        Array.from(Array(5)).map(
          (v, i) =>
            new Promise((resolve, reject) => {
              this.$refs[`formRef${i}`]
                .validate()
                .then(() => {
                  resolve()
                })
                .catch(() => {
                  reject(i)
                })
            })
        )
      )
    },
    clearValidate(active = this.active) {
      setTimeout(() => {
        this.$refs[`formRef${active}`].clearValidate()
      }, 0)
    },
    onIdCardValidTimeTypeChange() {
      this.$set(
        this.form.data.applymentJson.idCardInfo,
        'idCardValidTime',
        this.form.data.applymentJson.idCardInfo.__idCardValidTimeType === 1
          ? undefined
          : '长期'
      )
      setTimeout(() => {
        this.$refs.formRef0.clearValidate('idCardInfo.idCardValidTime')
      }, 0)
    },
    onDocPeriodEndTypeChange() {
      this.$set(
        this.form.data.applymentJson.idDocInfo,
        'docPeriodEnd',
        this.form.data.applymentJson.idDocInfo.__docPeriodEndType === 1
          ? undefined
          : '长期'
      )
      setTimeout(() => {
        this.$refs.formRef0.clearValidate('idDocInfo.docPeriodEnd')
      }, 0)
    },
    onContactPeriodEndTypeChange() {
      this.$set(
        this.form.data.applymentJson.contactInfo,
        'contactIdDocPeriodEnd',
        this.form.data.applymentJson.contactInfo
          .__contactPeriodEndType === 1
          ? null
          : '长期'
      )
      setTimeout(() => {
        this.$refs.formRef2.clearValidate(
          'contactInfo.__contactPeriodEndType'
        )
      }, 0)
    },
    updateDraftInfo() {
      this.$POST(
        '/sot-admin-api/merchant/applyment/updateDraftInfo',
        this.form.data.applymentJson
      ).then(({ data }) => {
        this.form.data.id = data
        this.$swal.success('保存成功')
      })
    },
    idCardOcr(file) {
      this.$POST
        .upload('/sot-admin-api/merchant/applyment/idCardOcr', {
          file
        })
        .then(({data}) => {
          this.$set(
            this.form.data.applymentJson.idCardInfo,
            'idCardNumber',
            data.idCard
          )
          this.$set(this.form.data.applymentJson.idCardInfo, 'idCardName', data.name)
          this.$swal.success('OCR识别成功，身份证姓名、身份证号已更新')
        })
    },
    licenseOcr(file) {
      this.$POST
        .upload('/sot-admin-api/merchant/applyment/licenseOcr', {
          file
        })
        .then(({ data }) => {
          this.$set(
            this.form.data.applymentJson.businessLicenseInfo,
            'businessLicenseNumber',
            data.businessLicenseNumber
          )
          this.$set(
            this.form.data.applymentJson.businessLicenseInfo,
            'merchantName',
            data.merchantName
          )
          this.$set(
            this.form.data.applymentJson.businessLicenseInfo,
            'legalPerson',
            data.name
          )
          this.$swal.success(
            'OCR识别成功，证书编号、商户名称、法人姓名已更新'
          )
        })
    },
    nextStep() {
      if (this.form.status === 'r') {
        this.active++
      } else {
        this.$refs[`formRef${this.active}`]
          .validate()
          .then(() => {
            this.active++
          })
          .catch(() => {
            this.$refs.kiFormDialogRef.highlightError()
          })
      }
    },
    submit() {
      this.$set(
        this.form.data.applymentJson.businessLicenseInfo,
        'businessTime',
        this.$isEmpty(
          this.form.data.applymentJson.businessLicenseInfo.__businessTime
        )
          ? null
          : JSON.stringify(
              this.form.data.applymentJson.businessLicenseInfo.__businessTime
            )
      )
      this.validate()
        .then(() => {
          console.log('submit')

          this.submitForm(
            pickDeepBy(this.form.data.applymentJson, (v, k) => notEmpty(v))
          )
        })
        .catch((i) => {
          this.active = i
          this.$refs.kiFormDialogRef.highlightError()
        })
    }
  }
}
</script>

<style lang="scss" scoped>
:deep(.el-form--inline) {
  margin: 0 100px 22px 100px !important;
  .el-form-item {
    margin-bottom: 0;
  }
}

.el-steps {
  position: sticky;
  top: -25px;
  padding-top: 1px;
  z-index: 2; // 高于“必填项”
  background: white;
}

.el-form {
  margin: 0 100px;

  .el-select {
    width: 100%;
  }

  h3 {
    position: relative;

    &:before {
      position: absolute;
      top: 2.2px;
      left: -10px;
      content: '';
      width: 4px;
      height: 1rem;
      background-color: rgba(0, 204, 51, 1);
      border-radius: 4px;
    }
  }
}
</style>
